<template>
	<view style="padding-bottom: 200rpx;padding-left: 10rpx;padding-right: 10rpx;" class="pages">
		<view class="flex_be nav">
			<view>{{$t('shoppingCart.Need')}}</view>
			<!-- <view class="nav-dele" @click="selectAllItems">{{$t('shoppingCart.Bulk')}}</view> -->
		</view>
		
		<view class="no_list" v-if="!list">
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" :text="$t('shoppingCart.Text')">
			</u-empty>
		</view>
		<view class="list" v-else style="">
			<view class="flex item" v-for="item in list" :key="item.id" >
				<view class="flex" style="width: 356px;flex-shrink: 0;">
					  <view
					     :class="allSelected || item.selected ? 'flex_ce item-ico item-ico-active' : 'flex_ce item-ico'"
					     v-show="batchShow"
					     @click="itemSelected(item)"
					   >
					      <uni-icons type="checkmarkempty" size="14" color="#FFFFFF"></uni-icons>
					   </view>
						
					<view class="flex_ce item-image"
						@click="to(`/pages/shop/goodDetail/goodDetail?id=${item.good_id}`)">
						<image :src="item.mainimg" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="flex_co item-info" style="width: 200rpx;">
						<view>
							<view style="width: 350rpx;">{{item.name}}</view>
							<view style="color: gray;display: flex;justify-content: space-between;width: 320rpx;"
								@click="openPurchase(item)">
								<view>{{item.spec_sku_name}}</view>
								<view>{{$t('shoppingCart.Num')}}{{item.num}}</view>
							</view>
						</view>
						<view class="item-info-price">
							<!-- <image src="@/static/img/logo.png" mode="widthFix" style="width: 30rpx;"></image> -->
							￥<text>{{(item.price*item.num).toFixed(2)}}</text>
						</view>
					</view>
				</view>
				<view class="flex_ce item-dele">{{$t('shoppingCart.Del')}}</view>
			</view>
		</view>
		<view class="flex_be operate" v-if="batchShow&&list.length!=0">
			<view class="flex_co" style="align-items: center;font-size: 28rpx;" @click="allSelectedClick">
				<view :class="allSelected?'flex_ce op-ico op-ico-active':'flex_ce op-ico'">
					<uni-icons type="checkmarkempty" size="14" color="#FFFFFF"></uni-icons>
				</view>
				<view>{{$t('shoppingCart.Choose')}}</view>
			</view>
			<view class="flex op-btn">
				<!-- <view @click="batchShow=false">{{$t('shoppingCart.Cancel')}}</view> -->
				<view @click="purchaseClick" style="background-color: skyblue;">{{$t('shoppingCart.cShop')}}</view>
				<view @click="cartDel">{{$t('shoppingCart.dChoose')}}</view>
			</view>
		</view>
		<uni-popup ref="purchase" type="bottom">
			<view class="purchase">
				<uni-icons type="closeempty" color="grey" class="pu-icon" @click="closePurchase"></uni-icons>
				<view class="flex" style="padding: 0 40rpx 40rpx 40rpx;">
					<view class="flex_ce pu-image">
						<image :src="seleSpecImg" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="flex_co" style="height: 200rpx;">
						<view>
							<view class="pu-price">
								<!-- <image src="@/static/img/logo.png" mode="widthFix" style="width: 30rpx;"></image> -->
								￥<text>{{inventoryInfo.price}}</text>
							</view>
							<view class="flex pu-welfare" style="flex-wrap: wrap;">
								<view>{{$t('shoppingCart.Inventory')}}{{inventoryInfo.stock_num}}</view>
								<view>{{$t('shoppingCart.Sale')}}{{inventoryInfo.sales}}</view>
							</view>
							<view class="num">
								<view class="num-box" @click="numSub">-</view>
								<view style="margin: 0 10rpx;">{{num}}</view>
								<view class="num-box" @click="numAdd">+</view>
							</view>
						</view>
						<view style="color: #ddd;font-size: 26rpx;">{{$t('shoppingCart.aChoose')}}
							{{seleSpecStr.toString() }}
						</view>
					</view>
				</view>
				<view class="pu-spec">
					<view class="pu-type" v-for="(item,index) in spec" :key="item.spec_id">
						<view class="pu-type-title">{{item.spec_name}}</view>
						<view class="flex pu-type-list" style="flex-wrap: wrap;">
							<view :class="item.active == i.spec_value_id?'pu-type-active':''" v-for="i in item.clild"
								:key="i.spec_value_id" @click="specClick(item,i,index)">
								<image :src="i.image" style="width: 100rpx;height: 100rpx;"></image>
								<view style="text-align: center;">{{i.spec_value}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pu-btn">
					<view @click="cartEdit">{{$t('shoppingCart.Save')}}</view>
				</view>
			</view>
		</uni-popup>
		<!-- <tab-bar isActive="2"></tab-bar> -->
	</view>
</template>

<script>
	import {
		cartLists,
		goodStock,
		shopGetStock,
		cartEdit,
		cartDel
	} from '@/api/api.js'
	import tabBar from "@/components/shop/tabBar/tabBar.vue"
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				batchShow: true,
				list: [],
				allSelected: false,
				page: 1,
				good_id: null,
				cart_id: null,
				num: 1,
				// 多规格
				spec: [],
				seleSpecImg: '',
				seleSpecStr: [],
				seleSpecId: [],
				// 库存信息
				inventoryInfo: {},
				isPurchase: null,
				// 批量操作
				itemSelectedId: []
			};
		},
		onReachBottom() {
			this.page++
			this.cartLists()
		},
		onLoad() {
			this.page = 1
			this.list = []
			this.cartLists()
		},
		methods: {	
			cartLists() {
				cartLists({
					token: uni.getStorageSync('token'),
					page: this.page
				}).then(res => {
					res.data.data.data.forEach(item => {
						item.selected = false
					})
					if (res.data.data.data.length > 0) {
						this.list = [...this.list, ...res.data.data.data]
					} else {
						this.page--;
						uni.showToast({
							title: this.$t('shoppingCart.noMore'),
							icon: "none"
						})
					}
				})
			},
			itemSelected(item) {
			  item.selected = !item.selected;
			
			  // 更新 itemSelectedId 数组
			  const index = this.itemSelectedId.indexOf(item.id);
			  if (item.selected && index === -1) {
			    this.itemSelectedId.push(item.id);
			  } else if (!item.selected && index !== -1) {
			    this.itemSelectedId.splice(index, 1);
			  }
			
			  // 如果取消选中，检查是否全部取消选中，是的话更新 allSelected
			  if (!item.selected) {
			    const selectedItems = this.list.filter((i) => i.selected);
			    this.allSelected = selectedItems.length === this.list.length;
			  } else {
			    // 如果选中，检查是否全部选中，是的话更新 allSelected
			    this.allSelected = this.list.every((i) => i.selected);
			  }
			  // 判断是否没有选中商品，是的话显示提示框
			   /* if (this.itemSelectedId.length === 0) {
			      uni.showToast({
			        title: this.$t('shoppingCart.PleseSelect'),
			        icon: "none"
			      });
			    } */
			   
			},

			allSelectedClick() {
			  this.itemSelectedId = [];
			  this.allSelected = !this.allSelected;
			  this.list.forEach(item => {
			    item.selected = this.allSelected;
			    if (this.allSelected) {
			      this.itemSelectedId.push(item.id);
			    }
			  });
			},

			// 删除
			cartDel() {
				cartDel({
					token: uni.getStorageSync('token'),
					cartids: this.itemSelectedId.toString()
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						this.batchShow = true
						this.page = 1
						this.list = []
						this.cartLists()
					}, 500)
				})
			},
			
			purchaseClick() {
				  // 判断是否没有选中商品
				 if (this.itemSelectedId.length === 0) {
				    uni.showToast({
				      title: this.$t('shoppingCart.PleseSelect'),
				      icon: "none"
				    });
				    return;  // 不执行跳转逻辑
				  }
				this.batchShow = true
				uni.navigateTo({
					url: `/pages/shop/order/confirm?idStr=${this.itemSelectedId.toString()}`
				})
			},
			
			to(path) {
				uni.navigateTo({
					url: path
				})
			},
			openPurchase(item) {
				this.$refs.purchase.open()
				this.good_id = item.good_id
				this.cart_id = item.id
				this.num = item.num
				this.seleSpecStr = item.spec_sku_name.split(',')
				this.seleSpecId = item.spec_value_ids
				this.goodStock()
			},
			// 多规格
			goodStock() {
				goodStock({
					good_id: this.good_id
				}).then(res => {
					this.spec = res.data.data.spec
					this.seleSpecImg = this.spec[0].clild[0].image
					this.spec.forEach((item, index) => {
						item.active = this.seleSpecId[index]
					})
					this.shopGetStock(this.seleSpecId)
				})
			},
			// 多规格点击切换
			specClick(item, i, index) {
				if (!!i.image) {
					this.seleSpecImg = i.image
				}
				item.active = i.spec_value_id
				this.seleSpecStr[index] = i.spec_value
				this.seleSpecId[index] = i.spec_value_id
				this.shopGetStock(this.seleSpecId)
				this.$forceUpdate() // 页面强制刷新
			},
			// 获取库存和id
			shopGetStock(id) {
				shopGetStock({
					good_id: this.good_id,
					spec_value_id: id.toString()
				}).then(res => {
					this.inventoryInfo = res.data.data.spec
				})
			},
			numAdd() {
				if (this.num < this.inventoryInfo.stock_num) {
					this.num++
				} else {
					uni.showToast({
						title: this.$t('general.Maximum'),
						icon: "none"
					})
				}
			},
			numSub() {
				if (this.num > 1) {
					this.num--
				} else {
					uni.showToast({
						title: this.$t('general.Minimum'),
						icon: "none"
					})
				}
			},
			// 编辑
			cartEdit() {
				cartEdit({
					token: uni.getStorageSync('token'),
					cart_id: this.cart_id,
					sku_id: this.inventoryInfo.sku_id,
					num: this.num
				}).then(res => {
					this.closePurchase()
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						this.page = 1
						this.list = []
						this.cartLists()
					}, 600)
				})
			},
			closePurchase() {
				this.$refs.purchase.close()
			}
		}
	}
</script>

<style lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.flex_ce {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex_be {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex_co {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.nav {
		width: 90%;
		padding: 20rpx 0;
		margin: 0 auto;
		font-size: 34rpx;
		font-weight: bold;

		.nav-ico {
			margin-right: 30rpx;

		}

		.nav-dele {
			font-size: 26rpx;
			font-weight: normal;
			border: #ddd 1px solid;
			padding: 5rpx 20rpx;
			border-radius: 40rpx;
		}
	}

	.list {
		width: 94%;
		margin: 0 auto;

		.item {
			overflow-x: scroll;
			width: 355px;
			padding: 30rpx 0;
			border-bottom: #F4F3F8 1px solid;

			.item-ico {
				border: #ddd 2px solid;
				width: 40rpx;
				height: 40rpx;
				border-radius: 40rpx;
				flex-shrink: 0;
			}

			.item-ico-active {
				background-color: #00C2C2;
				border: none;
			}

			.item-image {
				width: 240rpx;
				height: 240rpx;
				border: #F4F3F8 1px solid;
				margin: 0 30rpx;
				flex-shrink: 0;
			}

			.item-info {
				height: 240rpx;
				flex-grow: 1;

				.item-info-price {
					font-size: 24rpx;
					font-weight: bold;

					image {
						margin-right: 10rpx;
					}

					&>text {
						font-size: 36rpx;
					}
				}
			}

			.item-dele {
				height: 240rpx;
				width: 140rpx;
				background-color: #EB545B;
				color: #ffffff;
				flex-shrink: 0;
				border-radius: 5rpx;
				margin-left: 10rpx;
			}
		}
	}

	.operate {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;

		.op-ico {
			border: #ddd 2px solid;
			width: 40rpx;
			height: 40rpx;
			border-radius: 40rpx;
			flex-shrink: 0;
			margin-bottom: 10rpx;
		}

		.op-ico-active {
			background-color: #00C2C2;
			border: none;
		}

		.op-btn {
			&>view {
				padding: 15rpx 30rpx;
				border-radius: 5rpx;
			}

			&>view:first-child {
				border: #F4F3F8 1px solid;
				margin-right: 10rpx;
			}

			&>view:nth-child(2) {
				background-color: #00C2C2;
				color: #FFFFFF;
				margin-right: 10rpx;
			}

			&>view:last-child {
				background-color: crimson;
				color: #FFFFFF;
			}
		}
	}

	.purchase {
		background-color: #fff;
		padding: 40rpx 0 0;
		position: relative;

		.pu-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.pu-image {
			width: 200rpx;
			height: 200rpx;
			border: #F4F3F8 1px solid;
			flex-shrink: 0;
			margin-right: 30rpx;
		}

		.pu-price {
			font-weight: bold;

			&>text {
				font-size: 44rpx;
			}
		}

		.pu-welfare {
			&>view {
				border: gray 1px solid;
				font-size: 26rpx;
				padding: 0 10rpx;
				margin-right: 10rpx;
			}
		}

		.num {
			display: flex;
			align-items: center;
			margin-top: 10rpx;

			.num-box {
				background-color: #eee;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.pu-spec {
			background-color: #FAFAFC;
			padding: 0 40rpx;
			height: 500rpx;
			overflow: auto;
		}

		.pu-type {
			.pu-type-title {
				height: 80rpx;
				line-height: 80rpx;
			}

			.pu-type-list {
				&>view {
					background-color: #fff;
					padding: 10rpx 30rpx;
					margin: 0 20rpx 10rpx 0;
					border-radius: 5rpx;
				}

				.pu-type-active {
					border: 2px solid #000;
					box-sizing: border-box;
				}
			}
		}

		.pu-btn {
			padding: 20rpx;

			&>view {
				background-color: #00C2C2;
				width: 100%;
				height: 120rpx;
				color: #fff;
				border-radius: 5rpx;
				text-align: center;
				line-height: 120rpx;
				font-size: 44rpx;
			}
		}
	}
</style>